<template>
<div id="detail">
  <detail-nav-bar class="detail-bar" @titleClick="titleClick" ref="nav" />
  <scroll class="cont"
          ref="scroll"
          :probeType="3"
          @scroll="contentScroll">
    <detail-swiper :top-images="topImages" />
    <detail-base-info :goods="goods" />
    <detail-shop-info :shop="shop" />
    <detail-goods-info :detail-info="detailInfo" @imgLoad="imgLoad" />
    <detail-goods-param :param-info="paramInfo" ref="param" />
    <detail-goods-comment :commentInfo="commentInfo" ref="comment" />
    <goods-list :goods="recommends" ref="goods"  />
  </scroll>
  <detail-bottom-bar @addToCart="addShopCart"></detail-bottom-bar>
  <back-top @click="backTopClick" v-show="isShowBackTop"></back-top>
  <toast :message="message" :is-show="show"></toast>

  <detail-add-cart :goods-cart="goodsCart" v-show="false"></detail-add-cart>
</div>
</template>

<script>
import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailGoodsParam from "./childComps/DetailGoodsParam";
import DetailGoodsComment from "./childComps/DetailGoodsComment";
import DetailBottomBar from "./childComps/DetailBottomBar";
import DetailAddCart from "./childComps/DetailAddCart.vue"

import Scroll from "components/common/scroll/Scroll";
import GoodsList from "components/content/goods/GoodsList";
import BackTop from "components/content/backTop/BackTop";
import Toast from "components/content/toast/Toast";

import {getDetail ,Goods, Shop, GoodsParam, getRecommend, GoodsCart} from "network/detail";

export default {
  name: "Detail",
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailGoodsParam,
    DetailGoodsComment,
    DetailBottomBar,
    DetailAddCart,
    Scroll,
    GoodsList,
    BackTop,
    Toast
  },
  data(){
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      themeTop: [0, 2000, 3000, 4000],
      titleIndex: 0,
      isShowBackTop: false,
      show: false,
      message: '',
      goodsCart: {}
    }
  },
  created() {
    this.iid = this.$route.params.iid

    getDetail(this.iid).then(res => {
      const data = res.result
      // console.log(data);
      //获取顶部图片数据
      this.topImages = data.itemInfo.topImages

      //获取商品信息
      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services )

      //获取商家信息
      this.shop= new Shop(data.shopInfo)

      //获取商品详细信息
      this.detailInfo = data.detailInfo

      //获取商品的参数
      this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
      // console.log(data.itemParams.rule.tables);· 

      //获取点击加入购物车的信息
      let sizeInfo = data.itemParams.rule.tables

      this.goodsCart = new GoodsCart(data.itemInfo, data.itemParams.rule)

      //获取商品的评价信息
      if(data.rate.cRate !== 0){
        this.commentInfo = data.rate.list[0]
      }
    })

    //获取推荐信息
    getRecommend().then(res => {
      // console.log(res);
      this.recommends = res.data.list
      // console.log(this.recommends)
      this.$refs.scroll.refresh()
    })


  },
  methods: {
    imgLoad(){
      this.$refs.scroll.refresh()

      //获取商品、参数、评论、推荐的高度
      setTimeout(() => {
        this.themeTop = []
        this.themeTop.push(0)
        this.themeTop.push(this.$refs.param.$el.offsetTop)
        this.themeTop.push(this.$refs.comment.$el.offsetTop)
        this.themeTop.push(this.$refs.goods.$el.offsetTop)
        // console.log(this.themeTop);
      },100)

    },
    titleClick(index){
      this.$refs.scroll.scrollTo(0, -this.themeTop[index], 500)
    },
    contentScroll(position){
      //注：  positionY是负数
      const positionY = -position.y

      // if(positionY >= this.themeTop[0] && positionY < this.themeTop[1]){
      //   this.titleIndex = 0
      // }else if(positionY >= this.themeTop[1] && positionY < this.themeTop[2]){
      //   this.titleIndex = 1
      // }else if(positionY >= this.themeTop[2] && positionY < this.themeTop[3]){
      //   this.titleIndex = 2
      // }else if(positionY >= this.themeTop[3]){
      //   this.titleIndex = 3
      // }

      let length = this.themeTop.length

      for(let i = 0; i < length; i++){
        if(this.titleIndex !== i && ((i < length -1 && positionY >= this.themeTop[i] && positionY < this.themeTop[i+1])
          || (i === length -1 && positionY >= this.themeTop[i]))){
          this.titleIndex = i
          this.$refs.nav.currentIndex = this.titleIndex
          // console.log(this.titleIndex);
        }
      }

      //是否回到顶部
      // if(positionY >= 1000){
      //   this.isShowBackTop = true
      // }else {
      //   this.isShowBackTop = false
      // }
      this.isShowBackTop = positionY > 1000 ? true : false
    },
    backTopClick(){
      this.$refs.scroll.scrollTo(0, 0, 400)
    },
    addShopCart(){
      //获取购物车需要展示的信息
      const product = {}
      product.image = this.topImages[0]
      product.title = this.goods.title
      product.desc = this.goods.desc
      product.price = this.goods.realPrice
      product.iid = this.iid

      //将商品加入到购物车中
      this.$store.dispatch('addCart',product).then(res => {
        this.message = res
        this.show = true
        setTimeout(() => {
          this.show = false
          this.message = ''
        },1500)
      } )

    }

  }
}
</script>

<style scoped>
#detail{
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;

  /*bottom: 49px;*/
}
.detail-bar{
  position: relative;
  z-index: 9;
  background-color: #fff;
}
.cont{
  height: calc(100% - 44px - 49px);
}

</style>
